import React, { Component } from 'react';

import { Tabs, WhiteSpace } from 'antd-mobile';

import HomeListContainer from './HomelistStyleComp.js'

import  { Link } from 'react-router-dom'

import { connect } from 'react-redux'
                    
import { bindActionCreators } from 'redux'

import { actionCreators } from './store'


const Item = props => {
    return (
                <Link
                to={{
                    pathname:"/details",
                    search: `?goods_id=${props.goods_id}`,
                }}
                className="itemlink">
                    <li>
                        <div className="item_img">
                            <img src={props.pic_url}/>
                        </div>
                        <p className="price">
                            <i>￥{props.cprice}</i>
                            <del>￥{props.oprice}</del>
                        </p>
                        <p className="title">
                        {props.title}
                        </p>
                    </li>
                </Link>
    )
}
class HomeList extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            tabnames1:null,
            tabnames2:null,
         }
    }

    goHome=()=>{
        const {go} = this.props.history
        go(-1)
    }

    renderContent = tab =>
    (<div className="itemlist">
            <ul>
               {this.props.list.floor_data 
                && this.props.list.floor_data[0].slice(1, this.props.list.floor_data[0].length-1).map(item=><Item key={item.goods_id} {...item}/>)
                ||(this.props.list.goods && this.props.list.goods.map(item =><Item key={item.goods_id} {...item}/>))
                }
            </ul>
    </div>);

    render() { 
        return (
            <HomeListContainer style={{position:'relative'}}>
                <div className="homelisthead">
                    <i onClick = {this.goHome} className="fa fa-chevron-left" aria-hidden="true"></i>
                    <span>{ this.props.list.brandInfo && this.props.list.brandInfo.shop_name}</span>
                    <i className="fa fa-ellipsis-h" aria-hidden="true"></i>
                </div>
                <div className="brand">
                    <div className="brand_contain">
                        <div className="brand_img">
                            <img src={ this.props.list.brandInfo && this.props.list.brandInfo.logo_url}/>
                        </div>
                        <div className="brand_title">
                            <p className="title">{ this.props.list.brandInfo && this.props.list.brandInfo.shop_name}</p>
                            <p className="people">{ this.props.list.brandInfo && this.props.list.brandInfo.store_info}</p>
                        </div>
                        <div className="add_heart">
                        <i className="fa fa-heart" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <div>
                    <WhiteSpace />
                        {this.state.tabnames1 && <Tabs tabs={this.state.tabnames1} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={this.state.tabnames1.length} />}>
                        {this.renderContent}
                        </Tabs>}
                        {this.state.tabnames2 && <Tabs tabs={this.state.tabnames2} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={this.state.tabnames2.length} />}>
                        {this.renderContent}
                        </Tabs>}

                    <WhiteSpace />
                </div>
            </HomeListContainer>
         );
    }
    componentDidMount() {
     
        const { search } = this.props.location
        const brand_id= search.split('=')[1]
        this.props.get_list(brand_id)

       
        

    }

    componentWillReceiveProps( nextProps){
         //处理数据s
       
        // this.props.list.msort && this.props.list.msort.map(item=>console.log(item.text))
        
        if(nextProps.list.msort){
            nextProps.list.msort.map(item=>{
                item.title = item.text;
                this.setState({
                    tabnames1:nextProps.list.msort
                })
            }) 
            console.log(nextProps.list.msort)
            
        }else{
            nextProps.list.floor_bar && nextProps.list.floor_bar.map(item=>{
                this.setState({
                    tabnames2 :nextProps.list.floor_bar
                })
            })
        }
    }
    
}
 
export default connect(
    state=>state.home_list,
    dispatch=>bindActionCreators( actionCreators , dispatch )
    )(HomeList)